<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>fetch</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/layui/css/layui.css">
	<link rel="stylesheet" href="/css/main.css"/>
  <script src="/layui/layui.js"></script>
  <script src="/js/jquery.1.8.3.min.js"></script>
</head>
<body>

<div th:include="/common/courierHead :: head"></div>

<div  class="content" style="padding: 10px">




    <div class="layui-tab layui-tab-card">
        <div class="demoTable" style="margin-bottom: 10px">
            搜索ID：
            <div class="layui-inline">
                <input class="layui-input" name="id" id="demoReload" autocomplete="off">
            </div>
            <button class="layui-btn "data-type="reload">搜索</button>
        </div>


        <div class="layui-btn-group demoTable">
            <button class="layui-btn" data-type="getCheckData">测试1</button>
            <button class="layui-btn" data-type="getCheckLength">测试2</button>
            <button class="layui-btn" data-type="isAll">测试3</button>
        </div>

        <table class="layui-table" lay-data="{ height:430, url:'findAllAPackage',  page:true, id:'idTest'}" lay-filter="demo">
            <thead>
            <tr>
                <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
                <th lay-data="{field:'id', width:'90', sort: true, fixed: true}">订单号</th>
<!--                <th lay-data="{field:'id', width:'80', sort: true, fixed:true}">ID</th>-->
                <th lay-data="{field:'sendName',width:'80'}">寄件人</th>
                <th lay-data="{field:'sendAddress',width:'130',  sort: true}">寄件人地址</th>
                <th lay-data="{field:'sendPhone',width:'130', }">寄件人电话</th>
                <th lay-data="{field:'receiptName,width:'80''}">收件人</th>
                <th lay-data="{field:'receiptAddress',width:'130',  sort: true}">收件人地址</th>
                <th lay-data="{field:'receiptPhone',width:'130'}">收件人电话</th>
                <th lay-data="{field:'description',width:'160'}">描述/订单状态</th>
                <th lay-data="{field:'state',width:'50'}">状态</th>
                <th lay-data="{fixed: 'right', width:'298px', align:'center', toolbar: '#barDemo'}">操作</th>
            </tr>
            </thead>
        </table>

        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="fetchOk" >确认揽件</a>
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="fetchNo">揽件失败</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>


        <script src="layui/layui.all.js" charset="utf-8"></script>
        <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
        <script>

            layui.use('table', function(){
                var table = layui.table;
                //监听表格复选框选择
                table.on('checkbox(demo)', function(obj){
                    console.log(obj)
                });
                //监听工具条
                table.on('tool(demo)', function(obj){
                    var data = obj.data;

                    if(obj.event === 'fetchOk'){
                        layer.msg('ID：'+ data.id + ' 的查看操作');
                        layer.confirm('确定揽收吗？', function(index){
                            window.location.href="/courier/fetchPackage?packageId="+data.id+"&courierId=1";
                            layer.close(index);
                        });
                    } else if(obj.event === 'fetchNo'){
                        layer.confirm('确定揽收失败吗？', function(index){
                            obj.del();
                            layer.close(index);
                        });
                    } else if(obj.event === 'del'){
                        layer.confirm('真的删除行么', function(index){
                            obj.del();
                            layer.close(index);
                        });
                    } else if(obj.event === 'edit'){
                        layer.alert('编辑行：<br>'+ JSON.stringify(data))
                    }
                });

                var $ = layui.$, active = {
                    getCheckData: function(){ //获取选中数据
                        var checkStatus = table.checkStatus('idTest')
                            ,data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                    }
                    ,getCheckLength: function(){ //获取选中数目
                        var checkStatus = table.checkStatus('idTest')
                            ,data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                    }
                    ,isAll: function(){ //验证是否全选
                        var checkStatus = table.checkStatus('idTest');
                        layer.msg(checkStatus.isAll ? '全选': '未全选')
                    }
                };

                $('.demoTable .layui-btn').on('click', function(){
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });
                //搜索按钮点击事件
                // var $ = layui.$, active = {
                //     reload: function(){
                //         var demoReload = $('#demoReload');
                //
                //         //执行重载
                //         table.reload('idTest', {
                //             page: {
                //                 curr: 1 //重新从第 1 页开始
                //             }
                //             ,where: {
                //                 key: {
                //                     id: demoReload.val()
                //                 }
                //             }
                //         }, 'data');
                //     }
                // };
                // $('.demoTable .layui-btn').on('click', function(){
                //     var type = $(this).data('type');
                //     active[type] ? active[type].call(this) : '';
                // });
            });

        </script>









      </div>
	
	

</div>

<div th:include="/common/footer :: footer"></div>


</div>


<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>
</body>
</html>